<template>
  <view class="newOrder">
    <view class="form">
      <view class="form_item">
        <view class="text">
          <text>*</text>{{ sname ? "供货商" : "客户" }}:
        </view>
        <view class="input">
          <input
            v-model="cname"
            type="text"
            :placeholder="`请输入客户${sname ? '供货商' : '客户'}`"
          />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>联系电话: </view>
        <view class="input">
          <input v-model="cusTel" type="text" placeholder="请输入联系电话" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>业务员: </view>
        <view class="input">
          <input v-model="salId" type="text" placeholder="请输入业务员" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>订单日期: </view>
        <view class="input">
          <input v-model="orderDay" type="text" placeholder="请输入订单日期" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>实收款: </view>
        <view class="input">
          <input v-model="realAmt" type="text" placeholder="请输入金额" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>收款方式: </view>
        <view
          class="bg"
          @tap="openPayPick"
          style="display: flex; justify-content: space-between"
        >
          <view style="flex: 1" class="input">
            <input
              disabled
              v-model="payType[payChannel]"
              type="text"
              placeholder="请选择收款方式"
            />
          </view>
          <u-icon
            style="margin-right: 30rpx"
            name="arrow-down"
            color="#272727"
            size="24rpx"
          ></u-icon>
        </view>
        <!-- <view class="input" style="padding-right: 20rpx; background: #f2f2f2;border-radius: 49rpx;">
          <select
            v-model="payChannel"
            placeholder="请输入收款方式"
            name=""
            id=""
          >
            <option value="0">现金</option>
            <option value="1">汇单</option>
            <option value="2">银行卡转账</option>
            <option value="3">微信</option>
            <option value="4">支付宝</option>
            <option value="5">银行收款码</option>
          </select>
        </view> -->
      </view>
      <view class="form_item1">
        <view class="text"> 备注: </view>
        <view class="input">
          <input v-model="remark" type="text" placeholder="请输入备注" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> 订单号: </view>
        <view class="input">
          <input v-model="orderIdSale" type="text" placeholder="请输入订单号" />
        </view>
      </view>
      <view class="footer_btn">
        <button @tap="submit">修改</button>
        <button @tap="del">删除</button>
      </view>
    </view>

    <u-calendar :show="show1" mode="single" @confirm="confirm"></u-calendar>
	<!-- #ifndef MP -->
    <payPick
      ref="payPick"
      :defaultIndex="+payChannel"
      @confirm="confirmPayType"
    />
	<!-- #endif -->
  </view>
</template>
<script>
import payPick from "../../components/payPick.vue";
import { del } from "vue";
import payType from "../../utils/payType";
export default {
  components: {
    payPick,
  },
  data() {
    return {
      payType: payType,
      show1: false,
      // 客户
      cname: "",
      // 供货商
      sname: "",
      // 联系电话
      cusTel: "",
      // 业务员
      salId: "",
      // 订单日期
      orderDay: "",
      // 实收款
      realAmt: "",
      // 收款方式
      payChannel: "",
      // 备注
      remark: "",
      // 订单号
      orderIdSale: "",
      id: "",
    };
  },

  methods: {
    confirmPayType(data) {
      this.payChannel = data.type;
    },
    openPayPick() {
      this.$refs.payPick.open();
    },
    // 提交
    submit() {
      // flowOrderPurchaseDeleteApi
      // if (!this.sname) {
      //   if (this.user != "" && this.realAmt != "") {
      //     this.$api
      //       .flowOrderSaleCreateApi({
      //         id: this.id,
      //         cname: this.user,
      //         cusTel: this.phone,
      //         orderDay: this.orderDay,
      //         orderIdSale: this.orderIdSale,
      //         payChannel: this.payChannel,
      //         realAmt: this.realAmt,
      //         remark: this.remark,
      //         salId: this.salId,
      //       })
      //       .then((res) => {
      //         if (res.code == 200) {
      //           // console.log(res);
      //           uni.showToast({
      //             title: "提交成功",
      //             icon: "none",
      //           });
      //           uni.navigateTo({
      //             url: "/pages/financial/Collection",
      //           });
      //         }
      //       });
      //   }
      // } else {
      //   this.$api
      //     .flowOrderPurchaseDeleteApi({
      //       id: this.id,
      //     })
      //     .then((res) => {
      //       if (res.code == 200) {
      //         // console.log(res);
      //         uni.showToast({
      //           title: "提交成功",
      //           icon: "none",
      //         });
      //         uni.navigateTo({
      //           url: "/pages/financial/payment",
      //         });
      //       }
      //     });
      // }
    },
    del() {
      if (!this.sname) {
        this.$api
          .flowOrderSaleDeleteApi({
            cname: this.cname,
            cusTel: this.cusTel,
            salId: this.salId,
            orderDay: this.orderDay,
            realAmt: this.realAmt,
            payChannel: this.payChannel,
            remark: this.remark,
            orderIdSale: this.orderIdSale,
            id: this.id,
          })
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: "删除成功",
                icon: "none",
              });
              uni.navigateBack();
              // uni.navigateTo({
              // 	url: "/pages/financial/Collection",
              // });
            }
          });
      } else {
        this.$api
          .flowOrderPurchaseDeleteApi({
            id: this.id,
          })
          .then((res) => {
            if (res.code == 200) {
              // console.log(res);
              uni.showToast({
                title: "删除成功",
                icon: "none",
              });
              uni.navigateBack();
              // uni.navigateTo({
              // 	url: "/pages/financial/Payment",
              // });
            }
          });
      }
    },
  },
  onLoad(option) {
    this.cname = option.sname ? option.sname : option.cname;
    this.sname = option.sname;
    this.cusTel = option.cusTel;
    this.salId = option.salId;
    this.orderDay = option.orderDay;
    this.realAmt = option.realAmt;
    this.payChannel = option.payChannel;
    this.remark = option.remark;
    this.orderIdSale = option.orderIdSale;
    this.id = option.id;
    wx.setNavigationBarTitle({
      title: option.topName,
    });
    console.log(option);
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #fff;
}

.newOrder {
  background-color: #fff;
  height: 100vh;

  .form {
    padding: 38rpx 68rpx 32rpx 68rpx;
    background-color: #fff;
    // margin-top: 38rpx;

    .form_item {
      color: #bdbdbd;
      margin-bottom: 36rpx;

      .text {
        font-size: 0.875rem;
        margin-bottom: 22rpx;

        text {
          margin-left: 34rpx;
          color: #fe3430;
        }
      }

      .input {
        display: flex;
        align-items: center;

        input {
          color: #000;
          height: 94rpx;
          width: 100%;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
        }

        button {
          color: #fff;
          // width: 145rpx;
          height: 75rpx;
          line-height: 75rpx;
          background: #fe3430;
          border-radius: 38rpx;
        }
      }
    }

    .form_item1 {
      color: #bdbdbd;
      margin-bottom: 36rpx;
      text-indent: 1em;

      .text {
        font-size: 0.875rem;
        margin-bottom: 22rpx;

        text {
          color: #fe3430;
        }
      }

      .input {
        display: flex;
        align-items: center;

        select {
          color: #000;
          height: 94rpx;
          width: 100%;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
          border: none;
        }

        input {
          color: #000;
          height: 94rpx;
          width: 100%;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
        }

        button {
          width: 73rpx;
          height: 38rpx;
          background: #fe3430;
          border-radius: 49rpx;
          color: #fff;
        }
      }
    }

    .btn {
      display: flex;

      button {
        height: 58rpx;
        line-height: 58rpx;
        background: #fe3430;
        border-radius: 49rpx;
        color: #fff;
        margin-left: 0;
        margin-right: 10rpx;
      }
    }
  }

  .footer_btn {
    margin-top: 74rpx;
    display: flex;
    justify-content: space-between;
    padding-bottom: 74rpx;

    button {
      background: url("/static/images/user/button.png");
      background-size: 280rpx 124rpx;
      width: 280rpx;
      height: 124rpx;
      line-height: 96rpx;
      color: #ffffff;
    }
  }

  .toast {
    padding: 16rpx 49rpx;
    border-radius: 29rpx;

    .btn {
      display: flex;
      justify-content: space-around;
      padding: 30rpx 0;

      view {
        width: 463rpx;
        height: 97rpx;
        background: rgba(254, 52, 48, 0);
        border: 3rpx solid #272727;
        border-radius: 49rpx;
        line-height: 97rpx;
        text-align: center;
        margin: auto;
      }
    }

    .form {
      border-bottom: 1px solid #f1f1f1;
      padding: 0 0 30rpx 0;

      .select {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text {
          margin: 20rpx 0;
          color: #bdbdbd;
          margin-right: 20rpx;

          text {
            color: #fe3430;
          }
        }

        input {
          flex: 1;
          text-indent: 1em;
          height: 94rpx;
          background: #f2f2f2;
          border-radius: 47rpx;
          color: #000;
        }

        .input {
          display: flex;
          align-items: center;
          justify-content: space-between;

          input {
            width: 271rpx;
            color: #000;
          }

          text {
            text-align: left;
          }
        }
      }
    }
  }
  .bg {
    width: 100%;
    background: #f1f1f1;
    border-radius: 49rpx;
  }
}
</style>
